<button
    (click)="openModal(modalTemplate)"
    [disabled]="(!mailsBundleItems?.length && !rootConversationNode) || modalOpeningProgress"
    class="btn btn-sm btn-secondary d-flex flex-grow-1 align-items-center"
    title="Export to EML/JSON"
    type="button"
>
    <i *ngIf="modalOpeningProgress" class="fa fa-spinner fa-pulse fa-fw mr-1"></i>
    {{ title }}
    <span *ngIf="titleSuffix" [innerText]="titleSuffix" class="pl-1"></span>
</button>

<ng-template #modalTemplate>
    <div class="modal-header">
        <h5 class="modal-title">Export email messages to EML/JSON files</h5>
        <button (click)="modalRef?.hide()" aria-label="Close" class="close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <form (ngSubmit)="submit()" [formGroup]="form" class="mb-0" novalidate>
            <div class="d-flex mb-1">
                <div class="d-flex flex-grow-1">
                    <div class="input-group">
                        <input
                            (click)="selectExportDir()"
                            [ngClass]="{'is-invalid': formControls.exportDir.invalid}"
                            class="form-control form-control-sm"
                            formControlName="exportDir"
                            placeholder="Click to select a file system directory to export data to"
                            readonly
                            required
                            type="text"
                        >
                        <div class="input-group-append">
                            <button (click)="selectExportDir()" class="btn btn-sm btn-secondary" type="button">...</button>
                        </div>
                    </div>
                </div>
                <div btnRadioGroup class="btn-group ml-2" formControlName="fileType">
                    <label
                        btnRadio="eml"
                        class="btn btn-sm btn-secondary mb-0"
                    >EML</label>
                    <label
                        btnRadio="json"
                        class="btn btn-sm btn-secondary mb-0"
                    >JSON</label>
                </div>
            </div>
            <div class="mb-1">
                <div class="custom-control custom-switch">
                    <input
                        class="custom-control-input"
                        formControlName="includingAttachments"
                        id="includingAttachmentsCheckbox"
                        type="checkbox"
                    >
                    <label class="custom-control-label" for="includingAttachmentsCheckbox">
                        Including attachments
                    </label>
                </div>
                <div class="text-muted">
                    <small>
                        This toggle can only be enabled if you are "online" and "signed-in" into the email account since live attachments
                        loading and decrypting will be happening (attachments not stored in the local database).
                    </small>
                </div>
            </div>
            <button [disabled]="form.invalid" class="btn btn-sm btn-primary pull-right" type="submit">
                Export
            </button>
        </form>
    </div>
</ng-template>
